<template>
  <!--地方志-->
  <div class="background">
    <div class="contain">
      <div class="content-box">
        <div class="book-detail-box">
          <div class="top-line-box">
            <div class="top-line"></div>
          </div>
          <div class="book-box">
            <!--书籍详情展示框-->
            <book-detail-horizental-component
                :bookData="bookDataFirst"
            />
          </div>
        </div>
        <div class="book-guide-list-box">
          <look-more class="look-more" :to="{path:'/ResourceGuides/LocalHistory',query:{code:'local-history'}}"/>
          <div class="book-guide-list">
            <!--书籍展示列表-->
            <div class="book-box">
              <book-simple-local-history-component
                  class="book-item"
                  v-for="(item, index) in bookDataList"
                  :key="index"
                  :bookData="item"
              />
            </div>
          </div>
        </div>
      </div>
      <router-link class="slip-down-box" :to="{path:'/LocalNewspaper', query:{code:'local-newspaper'}}">
        <a-icon class="down-img" type="double-right"/>
      </router-link>
    </div>
  </div>
</template>

<script>
import LookMore from "../../components/ToolComponent/LookMore";
import BookDetailHorizentalComponent
  from "../../components/SourseDataComponent/Book/BookDetailHorizentalLocalHistoryComponent";
import BookSimpleLocalHistoryComponent from "../../components/SourseDataComponent/Book/BookSimpleLocalHistoryComponent";
import LoadFirstResourceInTopicMixin from "../../mixins/LoadFirstResourceInTopicMixin";
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";
//地方志栏目code
const CODE = "local-history";
export default {
  name: "LocalHistory",
  components: {
    LookMore,
    BookDetailHorizentalComponent,
    BookSimpleLocalHistoryComponent
  },
  data() {
    return {
      //首个专辑数据
      bookDataFirst: {},
      //页面数据
      bookDataList: []
    }
  },
  mixins: [
    //获取子栏目资源
    LoadTopicPageDataMixin,
    //获取栏目首个专辑资源
    LoadFirstResourceInTopicMixin
  ],
  created() {
    //设置栏目code
    this.setFirstResourceCOde(CODE);
    //加载栏目首个专辑资源
    this.loadFirstResourceInTopic().then(() => {
      this.bookDataFirst = this.resourceData;
    });

    //设置栏目code
    this.setPageDataCode(CODE);
    //设置页面大小
    this.setPageSize(12);
    //加载栏目数据
    this.loadPageData(1).then(() => {
      this.bookDataList = this.pageData.records;
      console.log('首页地方志数据:' + this.bookDataList )
    });

  },


}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px) {
  @width: 100vw;
  @min-height: 100vh;
  .background {
    background-image: url("../../assets/Phone-BackgroundImage/LocalHistory.png");
    .full-background;
    width: @width;
    min-height: @min-height;

    .contain {
      width: @width;
      min-height: @min-height;
      display: grid;
      grid-template-rows: repeat(10, 1fr);
      grid-template-columns: repeat(10, 1fr);

      .content-box {
        @content-width: calc(@width / 10 * 8); //80vw
        @content-height: calc(@min-height / 10 * 8); //144vw
        grid-row: 2 / span 8;
        grid-column: 2 / span 8;
        width: @content-width;
        height: @content-height;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        //书籍详情展示框
        .book-detail-box {
          //border:1px solid red;
          width: @content-width;
          height: calc((@content-height - 5vw) / 5 * 2); //55.6vw
          background-color: white;
          border-radius: 1vw;
          display: flex;
          flex-direction: column;
          align-items: center;

          .top-line-box {
            width: calc(@content-width - 6vw);
            height: 7vw;
            display: flex;
            justify-content: center;
            align-items: flex-start;

            .top-line {
              width: calc(@content-width / 3);
              height: 1vw;
              background-color: rgba(15, 121, 205, 1);
            }
          }

          .book-box {
            width: calc(@content-width - 6vw); //80vw - 6vw
            height: calc((@content-height - 5vw) / 5 * 2 - 10vw); //55.6vw - 10vw
            border-top: 1px solid rgba(15, 121, 205, 1);
            display: flex;
            justify-content: center;
            align-items: flex-end;
          }
        }

        //书籍展示列表
        .book-guide-list-box {
          //border:1px solid red;
          width: @content-width;
          height: calc((@content-height - 5vw) / 5 * 3); //83.4vw
          background-color: white;
          border-radius: 1vw;
          display: flex;
          flex-direction: column;
          align-items: center;

          .look-more {
            width: calc(@content-width - 6vw);
            height: 7vw;
          }

          .book-guide-list {
            width: calc(@content-width - 6vw); //80vw - 6vw
            height: calc((@content-height - 5vw) / 5 * 3 - 10vw); //83.4vw - 10vw
            border-top: 1px solid rgba(15, 121, 205, 1);
            display: flex;
            justify-content: center;
            align-items: center;

            .book-box {
              width: calc(@content-width - 7vw); //80vw - 6vw
              height: calc((@content-height - 5vw) / 5 * 3 - 10vw); //83.4vw - 10vw
              display: flex;
              justify-content: flex-start;
              align-items: flex-start;
              flex-wrap: wrap;

              .book-item {
                margin: 1vw;

                &:nth-child(n+7) {
                  display: none;
                }
              }
            }

          }
        }
      }

      .slip-down-box {
        grid-row: 10 / span 1;
        grid-column: 2 / span 8;
        width: calc(@width / 10 / 3 * 2);
        height: calc(@width / 10);
        place-self: center;
        transform: rotate(90deg);
        font-size: calc(@width / 10 / 3 * 2);

        .down-img {
          color: RGBA(122, 128, 118, 1);
        }
      }
    }
  }
}


//pc
@media only screen and (min-width: 576px) {
  .background {
    background-image: url("../../assets/PC-BackgroundImage/local-history.png");
    .full-background;

    .contain {
      .container;
      display: grid;
      grid-template-rows: 1.5fr 4fr 1fr;

      .content-box {
        @content-width: 900px;
        @content-height: 360px;
        grid-row: 2 / span 1;
        grid-column: 1 / span 1;
        width: calc(@content-width + 20px);
        height: @content-height;
        justify-self: center;
        display: flex;
        justify-content: space-between;
        //书籍详情展示框
        .book-detail-box {
          width: calc(@content-width / 3);
          height: @content-height;
          background-color: white;
          border-radius: 10px;

          .top-line-box {
            width: calc(@content-width / 3);
            height: 20px;

            .top-line {
              width: 100px;
              height: 5px;
              margin: 0 auto;
              background-color: rgba(15, 121, 205, 1);
            }
          }

          .book-box {
            margin: 10px;
            width: calc(@content-width / 3 - 10px * 2);
            height: calc(@content-height - 40px);
            border-top: 1px solid rgba(15, 121, 205, 1);
            display: flex;
            justify-content: center;
          }
        }

        //书籍展示列表
        .book-guide-list-box {
          width: calc(@content-width / 3 * 2); //460px
          height: @content-height;
          background-color: white;
          //padding:10px;
          border-radius: 10px;

          .look-more {
            width: calc(@content-width / 3 * 2 - 20px);
            height: 20px;
            margin: 10px 10px 0 10px;
          }

          .book-guide-list {
            width: calc(@content-width / 3 * 2 - 20px); //460px -20px
            height: calc(@content-height - 40px); //300px - 40px
            border-top: 1px solid rgba(15, 121, 205, 1);
            margin: 0 10px 10px 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            .book-box {
              width: calc(@content-width / 3 * 2 - 20px - 35px); //460px -20px
              height: calc(@content-height - 40px - 20px); //300px - 40px
              display: flex;
              justify-content: flex-start;
              align-content: flex-start;
              flex-wrap: wrap;

              .book-item {
                margin: 5px;

                &:nth-child(13) {
                  display: none;
                }
              }
            }
          }
        }
      }

      .slip-down-box {
        display: none;
      }
    }
  }
}

</style>
